import classes from './DxTable.module.scss';

type ColumnType<T> = {
  title: React.ReactNode | (({ sortColumn }: { sortColumn: ColumnType<T> }) => React.ReactNode);
  dataIndex: string;
  render?: (text: any, record: T, index: number) => React.ReactNode;
};
export type DxTableProps<T = any> = {
  rowKey?: string;
  columns?: ColumnType<T>[];
  dataSource?: T[];
};
const DxTable: React.FC<DxTableProps> = ({ rowKey = 'id', columns = [], dataSource = [] }) => {
  return (
    <div style={{ height: 'auto', overflow: 'auto' }}>
      <table className={classes.table}>
        <thead>
          <tr>
            {columns.map((t) => (
              <th style={{ width: 100 }} key={t.dataIndex}>
                {typeof t.title === 'function' ? t.title({ sortColumn: t }) : t.title}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {dataSource.map((t, i) => (
            <tr key={t[rowKey]}>
              {columns.map((c) => (
                <td key={c.dataIndex}>{c.render ? c.render(t[c.dataIndex], t, i) : t[c.dataIndex]}</td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            {columns.map((t) => (
              <th key={t.dataIndex}>200</th>
            ))}
          </tr>
        </tfoot>
      </table>
    </div>
  );
};

export default DxTable;
